<template>
  <div class="app-container">
 <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float:right"
          type="primary"
          @click="search()"
          size="small">
          查询搜索
        </el-button>
        <el-button
          style="float:right;margin-right: 15px"
          @click="ResetSearch()"
          size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true"  size="small" label-width="140px">
          <el-form-item label="输入搜索：">
            <el-input class="input-width" v-model="searchMap.where.specName" placeholder="规格名称" clearable></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表   </span>
        <el-button
        type="success"
        size="mini"
        icon="el-icon-plus"
        @click="add"
        >添加</el-button
        >

        
        <el-button size="mini" type="danger" @click="delBatch()" plain>批量删除</el-button>
        


        <!-- 数据表格 -->
        <el-table :data="ViewSpecOptionList" style="width: 100%" ref="ViewSpecOptionTable" >
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="specId"
            label="规格id"
            width="180">
        </el-table-column>
        <el-table-column
            prop="specName"
            label="规格名称"
            width="180">
            <!-- <template slot-scope="scope">
                <div>
                <img  style="width:100px;height:40px" :src="scope.row.logo">
                </div>
            </template> -->
        </el-table-column>
        <el-table-column
            prop="optId"
            label="选项id"
            width="180">
        </el-table-column>
        <el-table-column
            prop="optionName"
            label="选项名称">
            <!-- <template slot-scope="scope">
                {{scope.row.showStatus == 1 ? '展示':'下架'}}
            </template> -->
        </el-table-column>

        <el-table-column width="200px" 
                fixed = "right"
                label="操作">
            <template slot-scope="scope">
                <el-button size="mini" type="success" icon="el-icon-edit" @click="updateSpecOptions(scope.row.optId)">编辑</el-button>
                <el-button size="mini" type="danger" icon="el-icon-delete" @click="delSpecOptions(scope.row.optId)" >删除</el-button>
            </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchMap.page"
            :page-sizes="[1, 3, 5, 10]"
            :page-size="searchMap.size"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </el-card>

    

      <!-- 修改规格 -->

    <el-dialog title="品牌修改" :visible.sync="dialogFormVisible1">
      <el-form :model="ViewSpecOption"  ref="SpecOption">
        <el-form-item   label="规格名称"  label-width=80px  prop="name">
          <el-input v-model="ViewSpecOption.specName"  autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item  label="选项名称" label-width=80px  prop="firstLetter">
          <el-input v-model="ViewSpecOption.optionName" autocomplete="off"></el-input>
        </el-form-item>
       
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取 消</el-button>
        <el-button type="primary" @click="upSpecOption()">确 定</el-button>
      </div>
    </el-dialog>
   

  
    <!-- 添加规格 -->
  <el-dialog
    title="规格编辑"
    :visible.sync="dialogFormVisible"
    :close-on-click-modal="false"
  >
    <el-form>
      <el-form-item label="规格名称" label-width="100px">
        <el-input v-model="entity.specName"></el-input>
      </el-form-item>

      <el-button type="success" icon="el-icon-plus" @click="addOptions()"
        >添加规格选项</el-button
      >

      <el-table :data="entity.options" style="width: 100%">
            <el-table-column prop="date" label="规格选项名称" >
               <template slot-scope="scope">
                    <el-input  v-model="entity.options[scope.$index].optionName" ></el-input>
               </template>
            </el-table-column>
            <el-table-column prop="address" label="操作">
                    <template slot-scope="scope">
                        <el-button type="primary" @click="delOpt(scope.$index)" icon="el-icon-delete">删除</el-button>
                    </template>    
            </el-table-column>
      </el-table>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="saveSpec()">确 定</el-button>
    </div>
  </el-dialog>
  </div>

  
</template>


<script>
import {selectPage,save,findOne,updateOption,delByOptId} from '../api/spec'
export default {
  data() {
    return {
      dialogFormVisible: false,
      // 提交到后台的数据
      entity: {
        specName:  '',
        options: [],
      },
      searchMap: {
        page: 1,
        size: 5,
        where: {
          specName: "",
        },
      },
      ViewSpecOptionList: [],
      total: 0,
      dialogFormVisible1: false,
      ViewSpecOption: {
      }
    };
  },
  methods: {
    //分页查询
    search(){
        selectPage(this.searchMap).then(res => {
            if(res.success){
              console.log(res.data);
                this.ViewSpecOptionList = res.data;
                this.total = res.total;
            }
        })
    },
    // 查一个
    updateSpecOptions(optId){
        console.log(optId);
        findOne(optId).then(res =>{
            this.ViewSpecOption = res;
        })
        this.dialogFormVisible1 = true;
    },
    //修改选项信息
    upSpecOption(){
      updateOption(this.ViewSpecOption).then(res =>{
              if(res.success){
                this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success'
                });
                this.dialogFormVisible1 = false;
                this.search();
              }else{
                this.$notify({
                title: '修改失败',
                message: res.msg,
                type: 'error'
                });
              }
            })  
    },
    //重置
    ResetSearch(){
        this.searchMap = {
        page: 1,
        size: 5,
        where: {
          specName: "",
        },
     }
     this.search();
    },
    //添加按钮
    add(){
      this.entity = {
        specName:  '',
        options: [],
      },
      
      this.dialogFormVisible = true;

    },
    // 添加规格选项
    addOptions(){
      this.entity.options.push({});
    },
    // 删除规格选项
    delOpt(index){
      this.entity.options.splice(index,1);
    },
    // 保存规格与规格选项
    saveSpec(){
      console.log(this.entity);
      save(this.entity).then(res =>{
        if(res.success){
           this.$notify({
           title: '成功',
           message: '保存成功',
           type: 'success'
          });
           this.dialogFormVisible = false;
           this.search();
        }else{
           this.$notify({
              title: '保存失败',
              message: res.msg,
              type: 'error' 
            });
        }
      })
    },
    //批量删除
    delBatch(){
       console.log(this.$refs.ViewSpecOptionTable.selection);
      //  this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
      //     confirmButtonText: '确定',
      //     cancelButtonText: '取消',
      //     type: 'warning'
      //   }).then(() => {
      //       delBatch(this.$refs.ViewSpecOptionTable.selection).then(res=>{
      //           if(res.success){
      //             this.$notify({
      //                 title: '成功',
      //                 message: res.msg,
      //                 type: 'success'
      //               });
      //           }
      //           this.search();
      //       })
      //   })
    },
    //删除一个
    delSpecOptions(id){
      console.log(id);

      this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
          delByOptId(id).then((res) => {
            if (res.success) {
              this.$notify({
                title: '成功',
                message: res.msg,
                type: 'success'
              });
            }
            this.search();
          })
      })
    },

      //size变化的时候触发
    handleSizeChange(size) {
        this.searchMap.size = size;
        this.search();
    },
    //当前页发生变化的时候触发
    handleCurrentChange(page) {
        this.searchMap.page = page;
        this.search();
    },
  },
  created(){
      this.search();
  }
};
</script>